import React, { Component } from 'react';
import { Button, Modal, Form, Input, Radio } from 'antd';
import 'antd/dist/antd.css';
class CollectionCreateForm extends Component {
    formRef = React.createRef();
    constructor(props) {
        super(props);
        this.state = {
            visible:this.props.visible,
            onCreate:this.props.onCreate,
            onCancel:this.props.onCancel,
        }
    }
    setVisible = ()=>{
        this.setState({
            visible:this.props.visible
        })
    }



    render() {
        return (
            <Modal
                visible={this.state.visible}
                title="Create a new collection"
                okText="Create"
                cancelText="Cancel"
                onCancel={this.state.onCancel}
                onOk={() => {
                    this.formRef.current
                        .validateFields()
                        .then(values => {//成功时的回调
                            this.formRef.current.resetFields();
                            this.state.onCreate(values);
                        })
                        .catch(info => {//发生错误时的回调
                            console.log('Validate Failed:', info);
                        });
                }}
            >
                <Form
                    ref={this.formRef}
                    layout="vertical"
                    name="form_in_modal"
                    initialValues={{
                        modifier: 'public',
                    }}
                >
                    <Form.Item
                        name="title"
                        label="Title"
                        rules={[
                            {
                                required: true,
                                message: 'Please input the title of collection!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item name="description" label="Description">
                        <Input type="textarea" />
                    </Form.Item>
                    <Form.Item name="modifier" className="collection-create-form_last-form-item">
                        <Radio.Group>
                            <Radio value="public">Public</Radio>
                            <Radio value="private">Private</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}

class CollectionsPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible:false
        }
        this.formRef = React.createRef();
    }


    setVisible = (visible)=>{
        this.setState({
            visible:visible
        },()=>{
            this.formRef.current.setVisible();//this.formRef.current是子组件的引用
        })
        
    }


    onCreate = (values)=>{
        console.log('Received values of form: ', values);
        this.setVisible(false);
    };


    render() {
        return (
            <div>
                <Button

                    type="primary"
                    onClick={() => {
                        this.setVisible(true);
                    }}
                >
                    New Collection
                </Button>
                <CollectionCreateForm
                    ref={this.formRef}
                    visible={this.state.visible}
                    onCreate={this.onCreate}
                    onCancel={() => {
                        this.setVisible(false);
                    }}
                />
            </div>
        );
    }
}

export default CollectionsPage;